<template>
  <div class="totaltechology">
    <div class="tap">
        <el-dropdown size="mini" split-button type="primary"  @command="handleCommand">
          {{selecttype}}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in typelist" :key="index" :command="item">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div style="display:flex; align-items:center">
          <span style="margin-right:1rem">是否看自己</span>
          <el-switch class="showswitch"
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </div>
    <div class="technology" ref="technology">
        <transition-group>
          <div class="item" v-for="(item) in mydata" :key="item._id" @click="showdetail(item)" v-show="item.userid._id !=userinfo._id ? !value : true">
            <!-- <i  class="closenote icon-cuowu" @click.stop="deleteopen(item)"   v-if="item.userid._id == userinfo._id">
              
            </i> -->
            <el-button type="text" class="closenote icon-cuowu" @click.stop="deleteopen(item)"  v-if="item.userid._id == userinfo._id">
            </el-button>
            <h3 class="title">
              {{item.title}}
            </h3>
            <div class="detail">
                {{item.totalinfo}}
            </div>
            <div class="foot">
              <div>
                <span class="name">{{item.name}}</span>
                <span class="type">{{item.type}}</span>
                <span>.</span>
                <span class="time">{{gettime(item.time)}}</span>
              </div>
              <div>
                <i class="icon-dianzan" @click.stop="airticlegood(item)" :class="{active:item.mygood}"></i>
                <span>{{item.goods}}</span>
                <i class="icon-yanjing"></i>
                <span>{{item.watches}}</span>
              </div>
            </div>
          </div>
        </transition-group>
        <showairticle ref="commentsdetail" :eachairticle="eachcomment" :airticle = "airticle" :mytype = "mytype"></showairticle>
        <additems ref="additems" :show = "show" @showlist = "showlist"></additems>
        <div class="fiexbox">
          <div class="eachbox totop icon-huidingbu" @click="toTOP"></div>
          <div class="eachbox addbtn" @click="openadditems">+</div>
        </div>
       
    </div>
   </div>
</template>

<script>
import * as myfunc from "../commom/js/myfunc"
import showairticle from "./show/showariticle.vue"
import additems from "./additems/additems.vue"
export default {
  data(){
    return {
      mydata:[
        // {
        //   title:'关于如何解决float高度塌陷问题',
        //   container:'1.内部的Box会在垂直方向上一个接一个的放置。2.垂直方向上的距离由margin决定3.bfc的区域不会与float的元素区域重叠。4.计算bfc的高度时，浮动元素也参与计算5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。',
        //   time:'2021-09-07',
        //   name:'一只小青蛙',
        //   type:'前端/vue',
        //   watches:200,
        //   good:78,
        //   commentlist:[]
        // }
      ],
      totalmydata:[],//保存原始数据
      airticle:[],//只是为了消除错误信息而已
      eachcomment:{},
      mytype:'techology',
      show:4,
      userinfo:{},
      selecttype:'类别',//下拉选择
      value:false,//是否只看自己发的
      typelist:[],
      timer:null
    }
  },
  computed:{
    // type(){
    //   let type = [];
    //   this.mydata.forEach((item)=>{
    //     let eachtype = item.type;
    //     type.push(eachtype);
    //   })
    //   let unique = this.arraryunique(type);
    //   console.log(unique)
    //   return  unique
    // }
  },
  created(){
    this.showlist();
    this.showuserinfo();
  },
  methods:{
    toTOP(){//返回顶部
      this.timer = setInterval(()=>{
        let stop = this.$refs.technology.scrollTop;
        let speed = Math.floor(-stop/5);
        this.$refs.technology.scrollTop = stop + speed;
        if(stop == 0){
          clearInterval(this.timer)
        }
      },10)
      // this.$refs.technology.scrollTop = 0
    },
    handleCommand(command) {
      this.selecttype = command;
  		let type = command;
      if(command == '全部'){
        this.mydata = this.totalmydata;
        return
      }
      let list = this.totalmydata.filter((item)=>{
        if(item.type == type){
          return item
        }
      })    
      this.mydata = list;
  	},
    arraryunique(arr){//数组去重
      for(var i = 0;i<arr.length;i++){
         for(var j = i+1;j<arr.length;j++){
            if(arr[i]===arr[j]){
              arr.splice(j,1);
              j--
            }
         }
      }
      return arr
    },
    deleteopen(item) {
      this.$confirm('删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          let value = myfunc.getlocalstorage();
          let options = {
            uid:value._id,
            _id:item._id
          }
          console.log(options)
          this.$http.post(this.serverurl+'techology/remove',options).then((result)=>{
          let info = result.body;
          if(info.status == 200){
             this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
           this.showlist();
        },(err)=>{
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    showuserinfo(){
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        return
      }else{
         this.userinfo = value;
      }   
    },
    airticlegood(item){//给文章点赞
      let value = myfunc.getlocalstorage();
      let options = {
        aid:item._id,
        uid:value._id,
        good:!item.mygood
      };
      item.mygood = !item.mygood
      if(item.mygood){
        item.goods = item.goods + 1;
      }else{
        item.goods = item.goods - 1;
      }
       this.$http.post(this.serverurl+'goods/techology',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          let value = ""
           if(item.mygood){
              value = "点赞"
            }else{
              value = "取消点赞"
            }
          this.$notify({
            title: '成功',
            message: value,
            type: 'success'
          });
        }
      },(err)=>{
         this.$notify({
            title: '失败',
            message: '点赞',
            type: 'error'
          });
      })
    },
    openadditems(){
      this.$refs.additems.open();
    },
    showlist(){//后台获取文章列表
      let value = myfunc.getlocalstorage();
      let options = {
        uid:value._id,
      };
      this.$http.post(this.serverurl+'techology/show',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.mydata = info.data;
          this.mydata.sort((a,b)=>{
            let t1 = new Date(a.time);
            let t2 = new Date(b.time);
            return t2-t1
          })
          this.totalmydata =  this.mydata;
          let type = ['全部'];
          this.mydata.forEach((item)=>{
            let eachtype = item.type;
            type.push(eachtype);
          })
          this.typelist = this.arraryunique(type);
        }
      },(err)=>{
        console.log(err)
      })
    },
    showdetail(item){
      this.$refs.commentsdetail.open()
      this.eachcomment = item;
    },
    gettime(time){
      let d = new Date(time)
      let D = d.getDate();
      let M = d.getMonth() + 1;
      let Y = d.getFullYear();
      let h = d.getHours();
      let m = d.getMinutes();
      
      let n = new Date()
      let nD = n.getDate();
      let nM = n.getMonth() + 1;
      let nY = n.getFullYear();
      let nh = n.getHours();
      let nm = n.getMinutes();
      if(h< 10){
        h = '0'+h
      }
      if(m<10){
        m = '0'+m
      }
      if(D == nD && M == nM && Y == nY){
        return `${h}:${m}`
      }else if( M == nM && Y == nY && nD-D ==1){
        return `昨天${h}:${m}`
      }else{
        return ` ${Y}/${M}/${D} ${h}:${m}`
      }
    }
  },
  components:{
    showairticle,
    additems
  }
}
</script>

<style lang="less" scoped>
.totaltechology{
  height: 100%;
  display: flex;
  flex-direction: column;
  .tap{
    display: flex;
    align-items: center;
    padding:1rem 20rem 1rem 1rem;
    box-sizing: border-box;
    justify-content: space-between;
    .el-dropdown {
      vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    width: 100%;
  }
}
.technology{
  flex: 1;
  overflow-y:scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  // transition: all 0.5s ease;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  .fiexbox{
    position: fixed;
    right: 5%;
    bottom: 5%;
    .eachbox{
      margin-top: 2rem;
      cursor: pointer;
      z-index: 997;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      line-height: 5rem;
      text-align: center;
      font-size: 5rem;
      overflow: hidden;
      color: #ffffff;
      background-color: rgba(0, 122, 255, 100);
      transition: all 0.5s ease;
      &.totop{
        color:  rgba(0, 122, 255, 100);
         background-color: #ffffff;
      }
      &:hover{
        transform: scale(1.2);
      }
    }
  }
  
  .item{
    margin-right:20rem;
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    margin-bottom: 2rem;
    position: relative;
    .closenote{
      display: inline-block;
      padding: 0px;
      position: absolute;
      font-size: 1.5rem;
      // background-color: blue;
      color: rgb(240, 96, 96);
      text-align: center;
      transition: all 0.5s ease;
      transform-origin:50% 50%;  
      right: 1rem;
      top: 1rem;
      z-index: 150;
      &:hover{
        transform:rotate(90deg) ;
      }
    }
    &:hover{
      background-color: #fff;
    }
    .title{
      font-size: 2rem;
      color: #101010;
      font-weight: bold;
      line-height: 2rem;
      margin-bottom: 1rem;
    }
    .detail{
      color: #9e9e9e;
      font-size: 1.4rem;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      padding: 0 1rem;
      line-height: 2rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 1rem;
    }
    .foot{
      display: flex;
      justify-content: space-between;
      color: rgba(158, 158, 158, 100);
      font-size: 1.2rem;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      .active{
        font-size: 1.8rem;
        color: #007aff;
      }
      .name{
        color: #101010;
        font-size: 1.4rem;
        margin-right: 1rem;
      }
    }
  }
}
.v-enter-active,.v-leave-active {
  transition: all 0.4s ease;
}
.v-enter, .v-leave-to
{
  transform: translateX(100%);
  opacity: 0;
}
</style>